<template>
	<view class="content">
		<view class="navBody">
			<view v-for="(item,index) in navs" :key="index" :style="{'border-bottom':index !== 8 ? '1px solid #e3e3e3' : '1px solid #fff'}">
				<text>{{item.name}}</text>
				<image src="../../static/more.png"></image>
			</view>
		</view>
		<button :style="{backgroundColor:$store.state.primaryColor}">修改</button>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				navs:[{
					name:'头像'
				},{
					name:'英文名'
				},{
					name:'手机号'
				},{
					name:'性别'
				},{
					name:'生日'
				},{
					name:'身份证号'
				},{
					name:'省市地址'
				},{
					name:'详细地址'
				},{
					name:'邮箱'
				}]
			}
		}
	}
</script>

<style>
	page{
		background-color:#f7f7f7;
	}
</style>
<style scoped lang="less">
	.content{
		.navBody{
			width:80%;
			border-radius:20rpx;
			margin:0px auto;
			padding:20rpx 50rpx 20rpx 50rpx;
			background-color: #fff;
			view{
				display: flex;
				justify-content:space-between;
				align-items: center;
				padding-bottom:30rpx;
				padding-top:30rpx;
				text{
					font-weight:500;
					font-size:29rpx;
				}
				image{
					width:45rpx;
					height:45rpx;
				}
			}
		}
		button{
			width:50%;
			margin:0px auto;
			border-radius:50rpx;
			height:70rpx;
			color:#fff;
			margin-top:80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#fe8810;
			font-size:28rpx;
			letter-spacing:2rpx;
		}
	}
</style>